<script setup>
import { computed } from 'vue'
import {useRoute} from "vue-router";
import { listBedStudent } from "@/api/system/dorm.js";
import {ref} from "vue";
import StudentInfoDialog from '@/views/app/components/StudentInfoDialog.vue'

const route = useRoute()

const queryParams = reactive({})
const dormId = route.query.dormId // 输出"vue3"
const bedStudents = ref([])

// 新增布局计算逻辑
const containerStyle = computed(() => {
  const groups = Array.from(groupedBeds.value)
  const groupCount = groups.length

  // 计算列数和尺寸
  const cols = Math.ceil(Math.sqrt(groupCount))
  const availableWidth = window.innerWidth * 0.9
  const groupSize = availableWidth / cols
  const bedMargin = groupSize * 0.01

  return {
    gridTemplateColumns: `repeat(${cols}, 1fr)`,
    gap: `${groupSize * 0.2}px`,
    '--group-size': `${groupSize}px`,
    '--bed-margin': `${bedMargin}px`
  }
})

// 修改后的分组计算
const groupedBeds = computed(() => {
  const groups = new Map()
  bedStudents.value.forEach(bed => {
    const key = `${bed.xindex}-${bed.yindex}`
    if (!groups.has(key)) {
      groups.set(key, {
        x: bed.xindex,
        y: bed.yindex,
        beds: []
      })
    }
    groups.get(key).beds.push(bed)
  })
  return Array.from(groups.values()).sort((a, b) => a.y - b.y)
})

// 动态计算尺寸（新增）
const bedSize = computed(() => {
  const total = bedStudents.value.length
  const baseSize = Math.min(window.innerWidth, window.innerHeight)
  return total > 8 ? baseSize * 0.2 : baseSize * 0.3
})


// 座位点击处理
const handleBedClick = (bed) => {
  if (bed.dmStudent) {
    console.log(bed.dmStudent)
    selectedStudent.value = bed.dmStudent
    dialogVisible.value = true
  }
}

const dialogVisible = ref(false)
const selectedStudent = ref(null)



function getList() {
  queryParams.dormId = dormId
  queryParams.pageSize = 1000
  listBedStudent(queryParams).then(response => {
    bedStudents.value = response.rows;
  });
}
getList();
</script>

<template>
  <div class="dorm-container">
    <div class="bed-grid" :style="containerStyle">
      <div
          v-for="group in groupedBeds"
          :key="`${group.x}-${group.y}`"
          class="bed-group"
      >
        <div class="bed-stack">
          <div
              v-for="bed in group.beds.sort((a,b) => b.zindex - a.zindex)"
              :key="bed.zindex"
              class="bed-layer"
              :style="{
              height: `calc(var(--group-size) / ${group.beds.length})`,
              marginBottom: group.beds.length > 1 ? 'var(--bed-margin)' : 0
            }"
              @click="handleBedClick(bed)"
          >
            <div class="student-info">
              {{ bed.dmStudent?.studentName }}
              <div class="z-index">
                {{ bed.bedName }}
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>

    <!-- 进门区域 -->
    <div class="platform"></div>

    <!-- 学生详情弹窗 -->
    <StudentInfoDialog
        v-model="dialogVisible"
        :student="selectedStudent"
    />


  </div>
</template>

<style scoped>
.dorm-container {
  height: 82vh;
  box-sizing: border-box;
}

.bed-grid {
  display: grid;
  width: 100%;
  height: 100%;
  place-items: center;
}

.bed-group {
  width: var(--group-size);
  height: var(--group-size);
  position: relative;
}

.bed-stack {
  width: 100%;
  height: 100%;
  position: relative;
}

.bed-layer {
  width: 100%;
  background: #a3d8f4;
  border-radius: 8px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  box-shadow: 0 2px 8px rgba(0,0,0,0.1);
  cursor: pointer;
  transition: transform 0.2s;

  &:hover {
    transform: scale(1.05);
    z-index: 2;
  }

  &:nth-child(odd) {
    background: #b8e2f2;
  }
}

.student-info {
  font-size: 14px;
  padding: 8px;
  text-align: center;
  word-break: break-word;
}

.z-index {
  font-size: 12px;
  color: #666;
  margin-top: 4px;
}

.platform {
  position: fixed;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 100px;
  background: #8d6e63;
  box-shadow: 0 -2px 10px rgba(0,0,0,0.1);
  z-index: 1;

  &::before {
    content: '进   门';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    color: white;
    font-size: 24px;
    letter-spacing: 4px;
  }
}
</style>